<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '',
  },
}
</route>

<template>
  <!-- <view v-if="_isVideo" class="common-detail-container">
    <view class="common-detail-info-header">
      <NewVideo
        :src="src"
        :autoplay="true"
        :is-disabled="!isComplete"
        :custom="false"
        :init-fullscreen="false"
        height="100%"
        @end="completeVideoLearn"
      />
    </view>
    <view class="common-detail-info-body">
      <view class="detail-info-title">
        <view class="detail-info-title__line"></view>
        <text>{{ detail.name }}</text>
      </view>
      <view class="detail-info-desc" v-if="detail.note">{{ detail.note }}</view>
    </view>
  </view>
  <web-view :src="src" v-else @load="load" @error="error"></web-view> -->
  <web-view :src="src" @load="load" @error="error"></web-view>
</template>

<script setup>
import CourseApi from '@/service/course'
import { isVideo } from '@/utils'
import NewVideo from '@/components/NewVideo/index.vue'
import { Base64 } from 'js-base64'

const timer = ref(null)
// const prevSrc = 'http://123.249.22.87:8012/onlinePreview?url='
const prevSrc = 'https://admin.lhwhlt.cn/preview/onlinePreview?url='
const src = ref('')
const _isVideo = ref(false)
const isComplete = ref(false)
const detail = ref(null)
const getDetail = async (id) => {
  const { code, result } = await CourseApi.getCourseDetail(id)
  if (code === 200) {
    detail.value = result
    _isVideo.value = isVideo(result.resourceType)
    isComplete.value = result?.lessonUserStatus === 'complete'

    // if (_isVideo.value) {
    //   src.value = result.resourceUrl
    // } else {
    //   src.value = prevSrc + encodeURIComponent(Base64.encode(result.resourceUrl))
    // }

    src.value = prevSrc + encodeURIComponent(Base64.encode(result.resourceUrl))
    uni.setNavigationBarTitle({ title: result.name || '' })
  }
}
const completeVideoLearn = async () => {
  console.log('cc', completeVideoLearn)
  if (!isComplete.value) {
    // 执行已学习的接口
    const ret = await CourseApi.completeUserCourse({
      lessonId: detail.value?.id,
    })
    const { code, success } = ret
    console.log('rrr', ret)
    if (code === 200 && success) {
      isComplete.value = true
      // 提示完成
      uni.showToast({
        title: '学习完成',
      })
      uni.$emit('updateLearn', detail.value.id)
    }
  }
}

// 等web-view加载完在执行
const load = () => {
  // 如果是未完成状态下
  if (!isComplete.value) {
    timer.value && clearTimeout(timer.value)
    timer.value = setTimeout(async () => {
      const ret = await CourseApi.completeUserCourse({
        lessonId: detail.value.id,
      })
      const { code, success } = ret
      if (code === 200 && success) {
        uni.showToast({
          title: '学习完成',
        })
        isComplete.value = true
        uni.$emit('updateLearn', detail.value.id)
      }
    }, 10 * 1000)
  }
}

const error = () => {
  uni.showToast({ title: ' 加载失败，请重试', icon: 'none' })
}

onLoad((options) => {
  console.log('onLoad', timer.value, detail.value)
  getDetail(options.id)
})

onShow(() => {
  console.log('onShow', timer.value, detail.value, isComplete.value)
  if (detail.value) {
    // 退出小程序重新进的时候,如果是文档类型并且是未完成的状态下，重新执行观看10s表示学习成功
    const { resourceType } = detail.value
    if (!isVideo(resourceType) && !isComplete.value) {
      timer.value && clearTimeout(timer.value)
      timer.value = setTimeout(async () => {
        const ret = await CourseApi.completeUserCourse({
          lessonId: detail.value.id,
        })
        const { code, success } = ret
        if (code === 200 && success) {
          uni.showToast({
            title: '学习完成',
          })
          isComplete.value = true
          uni.$emit('updateLearn', detail.value.id)
        }
      }, 10 * 1000)
    }
  }
})

onUnload(() => {
  console.log('onUnload', timer.value)
  timer.value && clearTimeout(timer.value)
  timer.value = null

  // 初始化数据
  detail.value = null
  isComplete.value = false
})

onHide(() => {
  console.log('onHide', timer.value)
  timer.value && clearTimeout(timer.value)
  timer.value = null
})
</script>
